<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>集锦详情</title>
    <link rel="stylesheet" href="normalize.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
          sans-serif;
        background-color: #f1f2f4;
        max-width: 480px;
        min-height: 100vh;
        margin: 0 auto;
        position: relative;
        color: #333;
      }

      /* 顶部导航栏 */
      .topNav {
        background-color: #ffffff;
        border-bottom: 1px solid #e0e0e0;
        padding: 16px;
        position: sticky;
        top: 0;
        z-index: 100;
      }

      .topNav .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .topNav .leftSection {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
      }

      .topNav .backButton {
        font-size: 24px;
        color: #333;
        cursor: pointer;
        width: 20px;
      }

      .topNav .title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }


      /* 视频播放器容器 */
      .videoPlayer {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-color: #000000;
        overflow: hidden;
      }

      /* 视频占位符 */
      .videoPlayer .placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #1a1a1a;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 14px;
      }

      .videoPlayer .placeholder::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 1px;
        background: linear-gradient(to right, transparent, #444, transparent);
      }

      .videoPlayer .placeholder::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 60%;
        background: linear-gradient(to bottom, transparent, #444, transparent);
      }

      .videoPlayer .placeholderText {
        position: relative;
        z-index: 2;
      }

      /* 播放控制条 */
      .controlBar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 10;
      }

      /* 进度条容器 */
      .progressContainer {
        width: 100%;
        height: 4px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        position: relative;
        cursor: pointer;
      }

      .progressBar {
        height: 100%;
        background-color: #ffffff;
        border-radius: 6px;
        width: 5%;
        position: relative;
      }

      .progressBar::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background-color: #ffffff;
        border-radius: 50%;
      }

      /* 控制按钮行 */
      .controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ffffff;
        font-size: 13px;
      }

      .controls .leftControls {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .controls .rightControls {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .playButton,
      .speedButton,
      .fullscreenButton {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 13px;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background-color 0.3s;
      }

      .playButton:hover,
      .speedButton:hover,
      .fullscreenButton:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      .timeDisplay {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.9);
      }

      /* 视频信息区域 */
      .videoInfo {
        background-color: #ffffff;
        padding: 12px;
      }

      .videoInfo .titleRow {
        font-size: 15px;
        font-weight: 500;
        color: #333;
        margin-bottom: 12px;
        line-height: 1.4;
      }

      .videoInfo .metaRow {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        color: #999;
        flex-wrap: wrap;
      }

      .videoInfo .metaItem {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .videoInfo .metaIcon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #999;
        border-radius: 2px;
      }

      .videoInfo .separator {
        color: #d0d0d0;
      }

      /* 空状态（备用） */
      .emptyState {
        padding: 60px 16px;
        text-align: center;
        color: #999;
      }

      .emptyState .message {
        font-size: 14px;
        color: #999;
      }

      /* 相关推荐区域 */
      .recommendSection .sectionTitle {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 8px;
        padding:0 10px 12px;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
        /* background-color: #f1f2f4; */
        background-color: #fff;
      }

      .recommendSection .titleIcon {
        display: inline-block;
        width: 4px;
        height: 16px;
        background-color: #333;
        border-radius: 6px;
      }

      /* 推荐视频列表 */
      .videoList {
        background-color: #ffffff;
        overflow: hidden;
      }

      .videoItem {
        display: flex;
        gap: 12px;
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      .videoItem:last-child {
        border-bottom: none;
      }

      .videoItem:hover {
        background-color: #fafafa;
      }

      /* 视频缩略图 */
      .videoItem .videoThumb {
        position: relative;
        width: 120px;
        height: 80px;
        flex-shrink: 0;
        background-color: #e8e8e8;
        border-radius: 6px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 11px;
      }

      .videoItem .videoThumb::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 1px;
        background: linear-gradient(to right, transparent, #ccc, transparent);
      }

      .videoItem .videoThumb::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 60%;
        background: linear-gradient(to bottom, transparent, #ccc, transparent);
      }

      .videoItem .thumbText {
        position: relative;
        z-index: 2;
      }

      .videoItem .duration {
        position: absolute;
        bottom: 4px;
        right: 4px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 2px 4px;
        border-radius: 3px;
        font-size: 10px;
        z-index: 10;
      }

      /* 视频信息 */
      .videoItem .videoDetails {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
      }

      .videoItem .videoTitle {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        line-height: 1.4;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .videoItem .videoMeta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: #999;
      }

      .videoItem .metaIcon {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #999;
        border-radius: 2px;
      }

      .videoItem .separator {
        color: #d0d0d0;
      }
    </style>
  </head>
  <body>
    <!-- 顶部导航栏 -->
    <div class="topNav">
      <div class="header">
        <div class="leftSection">
          <div class="backButton">&lt;</div>
          <div class="title">集锦详情</div>
        </div>
      </div>
    </div>

    <!-- 视频播放器 -->
    <div class="videoPlayer">
      <!-- 视频占位符 -->
      <div class="placeholder">
        <span class="placeholderText">视频加载中</span>
      </div>

      <!-- 播放控制条 -->
      <div class="controlBar">
        <!-- 进度条 -->
        <div class="progressContainer">
          <div class="progressBar"></div>
        </div>

        <!-- 控制按钮 -->
        <div class="controls">
          <div class="leftControls">
            <button class="playButton">▶</button>
            <span class="timeDisplay">00:04 / 104:54</span>
          </div>
          <div class="rightControls">
            <button class="speedButton">1x</button>
            <button class="fullscreenButton">全屏</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频信息区域 - 示例1: 有球队名称 -->
    <div class="videoInfo">
      <div class="titleRow">蒙牛足球队 · 鲲锐九人制球场足球场</div>
      <div class="metaRow">
        <div class="metaItem">
          <span class="metaIcon"></span>
          <span>8047次播放</span>
        </div>
        <span class="separator">·</span>
        <div class="metaItem">
          <span>2025年11月01日 14:30</span>
        </div>
      </div>
    </div>

    <!-- 相关推荐区域 -->
    <div class="recommendSection">
      <div class="sectionTitle">
        <span class="titleIcon"></span>
        相关推荐
      </div>

      <div class="videoList">
        <!-- 推荐视频 1 -->
        <div class="videoItem">
          <div class="videoThumb">
            <span class="thumbText">视频缩略图</span>
            <div class="duration">2:15</div>
          </div>
          <div class="videoDetails">
            <div class="videoTitle">东城足球队精彩集锦 - 速度与技巧的完美结合</div>
            <div class="videoMeta">
              <span class="metaIcon"></span>
              <span>1205次播放</span>
              <span class="separator">·</span>
              <span>2025年10月28日</span>
            </div>
          </div>
        </div>

        <!-- 推荐视频 2 -->
        <div class="videoItem">
          <div class="videoThumb">
            <span class="thumbText">视频缩略图</span>
            <div class="duration">3:42</div>
          </div>
          <div class="videoDetails">
            <div class="videoTitle">炫威队精彩进球集锦</div>
            <div class="videoMeta">
              <span class="metaIcon"></span>
              <span>3100次播放</span>
              <span class="separator">·</span>
              <span>2025年10月25日</span>
            </div>
          </div>
        </div>

        <!-- 推荐视频 3 -->
        <div class="videoItem">
          <div class="videoThumb">
            <span class="thumbText">视频缩略图</span>
            <div class="duration">4:20</div>
          </div>
          <div class="videoDetails">
            <div class="videoTitle">运动年代 vs 东都剑锋 - 巅峰对决全场回放</div>
            <div class="videoMeta">
              <span class="metaIcon"></span>
              <span>8031次播放</span>
              <span class="separator">·</span>
              <span>2025年10月20日</span>
            </div>
          </div>
        </div>

        <!-- 推荐视频 4 -->
        <div class="videoItem">
          <div class="videoThumb">
            <span class="thumbText">视频缩略图</span>
            <div class="duration">1:58</div>
          </div>
          <div class="videoDetails">
            <div class="videoTitle">猛虎咆哮队门将精彩扑救合集</div>
            <div class="videoMeta">
              <span class="metaIcon"></span>
              <span>2450次播放</span>
              <span class="separator">·</span>
              <span>2025年10月18日</span>
            </div>
          </div>
        </div>

        <!-- 推荐视频 5 -->
        <div class="videoItem">
          <div class="videoThumb">
            <span class="thumbText">视频缩略图</span>
            <div class="duration">3:05</div>
          </div>
          <div class="videoDetails">
            <div class="videoTitle">横扫千军局 - AI智能运动集锦</div>
            <div class="videoMeta">
              <span class="metaIcon"></span>
              <span>5200次播放</span>
              <span class="separator">·</span>
              <span>2025年10月15日</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频信息区域 - 示例2: 无球队名称（备用，实际使用时二选一） -->
    <!-- <div class="videoInfo">
      <div class="titleRow">鲲锐九人制球场足球场</div>
      <div class="metaRow">
        <div class="metaItem">
          <span class="metaIcon"></span>
          <span>8047次播放</span>
        </div>
        <span class="separator">·</span>
        <div class="metaItem">
          <span>2025年11月01日 14:30</span>
        </div>
      </div>
    </div> -->
  </body>
</html>
